/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-05-10 15:18:27
 * @LastEditTime: 2023-10-16 18:20:22
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Flex, SimpleGrid } from '@chakra-ui/react';

import { useAppSelector } from 'store/storeHooks';

import QuestionCard from './QuestionCard';

const QuestionList = () => {
  const { questionList } = useAppSelector((store) => store.question);
  const n = import.meta.env.VITE_QUESTION_NUMBER;
  return (
    <Flex flexGrow="1" align="center" justify="center">
      <SimpleGrid
        spacing={{ base: 4, lg: 5, xl: 7, '2xl': 20, '2k': 32 }}
        columns={{
          base: 1,
          sm: 1,
          md: 3,
          lg: n > 3 ? 3 : n,
        }}
        p={{ base: 2, lg: 2, xl: 4, '2xl': '6', '1080p': 8, '2k': 10, '4k': 20 }}
      >
        {questionList.map((q) => {
          return <QuestionCard key={q.id} question={q} />;
        })}
      </SimpleGrid>
    </Flex>
  );
};

export default QuestionList;
